<template>
  <div class="register">
    <div class="top" @click="$router.go(-1)">
      <img
        :src="require(`../../assets/theme/${theme}/image/Union.png`)"
        alt=""
      />
    </div>
    <Step :step="1"></Step>
    <div class="title textColor">{{ $t("注册") }}</div>
    <div class="flex re-tab">
      <div
        class="textColor1"
        :class="activeIndex == 0 ? 'active' : ''"
        @click="changeIndex(0)"
      >
        {{ $t("账号") }}
      </div>
      <div
        class="textColor1"
        :class="activeIndex == 1 ? 'active' : ''"
        @click="changeIndex(1)"
      >
        {{ $t("邮箱") }}
      </div>
      <!-- <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('手机号') }}</div> -->
    </div>
    <ExInput
      :label="getRegType(activeIndex, true)"
      :placeholderText="getRegType(activeIndex, false)"
      v-model.trim="username"
      :area="isArea"
      :dialCode="dialCode"
      @selectArea="onSelectArea"
      :icon="icon"
    />

    <ExInput
      :label="$t('设置密码')"
      :placeholderText="$t('密码（6-12个字符）')"
      v-model="password"
      typeText="password"
    />
    <ExInput
      :label="$t('确认密码')"
      :placeholderText="$t('请确认密码')"
      v-model="repassword"
      typeText="password"
    />
    <ExInput
      :label="$t('资金密码')"
      :placeholderText="$t('资金密码(6位数字)')"
      v-model="fundPassword"
      typeText="password"
    />
    <ExInput
      :label="$t('确认资金密码')"
      :placeholderText="$t('请确认资金密码')"
      v-model="refundPassword"
      typeText="password"
    />
    <div class="codeWrap" v-if="activeIndex != 0">
      <p>{{ $t("验证码") }}</p>
      <div class="iptbox" style="background-color: #fff; padding: 0; gap: 20px">
        <input
          class="textColor"
          type="text"
          :placeholder="$t('请输入验证码')"
          style="border: 1px solid #e8e8e8; padding: 0 20px; border-radius: 6px"
          v-model="verifyCode"
        />
        <div
          @click="senCode"
          style="
            background-color: #000;
            border-radius: 6px;
            height: 100%;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
          "
        >
          {{ $t("发送验证码") }} <template v-if="time"> ({{ time }})s</template>
        </div>
      </div>
    </div>
    <ExInput
      :label="$t('邀请码(选填)')"
      :placeholderText="$t('请输入邀请码')"
      v-model="invitCode"
      :clearBtn="false"
    />
    <div class="protocol textColor">
      <!-- <i @click="agreeProt">
                <img v-show="agree" src="../../assets/image/login/prot2.png" alt="" />
                <img v-show="!agree" src="../../assets/image/login/prot1.png" alt="" />
            </i> -->
      登录即表示同意<span
        style="font-weight: bold; color: #000; text-decoration: underline"
        @click="$router.push('/TermsOfService?serviceTerm=1')"
        >{{ $t("服务条款") }}</span
      >
    </div>
    <div class="btn" @click="register">{{ $t("注册") }}</div>
    <div class="noTips" style="text-align: center; color: #000">
      {{ $t("已有账号")
      }}<span
        style="font-weight: bold; color: #000; text-decoration: underline"
        @click="$router.push('/login')"
      >
        {{ $t("去登录") }}</span
      >
    </div>
    <nationality-list
      ref="controlChild"
      :title="$t('选择区域码')"
      @getName="getName(arguments)"
    ></nationality-list>

    <Vcode
      :imgs="[img1, img2]"
      :show="show"
      @success="onSuccess"
      :canvasHeight="200"
      @fail="onFail"
      @close="show = false"
      sliderText=""
      :successText="$t('验证通过!')"
      :failText="$t('验证失败,请重试')"
    />

    <div>{{ msg }}</div>
  </div>
</template>

<script>
import { Popup } from "vant";
import ExInput from "@/components/ex-input";
import Step from "./step.vue";
import Axios from "@/API/login.js";
import { mapActions, mapGetters } from "vuex";
import { GET_USERINFO } from "@/store/const.store";
import nationalityList from "../authentication/components/nationalityList.vue";
import Vcode from "vue-puzzle-vcode";
import img1 from "../../assets/image/slider/1.png";
import img2 from "../../assets/image/slider/2.png";
import { getStorage } from "@/utils/utis";
export default {
  props: {},
  components: {
    [Popup.name]: Popup,
    ExInput,
    Step,
    nationalityList,
    Vcode,
  },
  data() {
    return {
      show: false,
      msg: "",
      type: 3, // 1手机 2 邮箱 3账号
      agree: false,
      username: "",
      password: "",
      repassword: "",
      invitCode: "", //邀请码
      activeIndex: 0,
      typeText: "password",
      isArea: false,
      dialCode: 0, //电话号前缀
      icon: "",
      img1,
      img2,
      fundPassword: "",
      refundPassword: "",
      verifyCode: "",
      timer: null,
      time: 0,
      account: "", //验证码发送帐号
    };
  },
  mounted() {
    let usercode = getStorage("usercode");
    if (usercode) {
      this.invitCode = usercode;
    }
  },
  computed: {
    ...mapGetters({
      theme: "home/theme",
    }),
  },
  methods: {
    ...mapActions("user", [GET_USERINFO]),
    senCode() {
      if (this.time > 0) {
        return false;
      }

      switch (this.activeIndex) {
        case 1: {
          this.account = this.username;
          break;
        }
        case 2: {
          this.account = `${this.dialCode}${this.username}`;
          break;
        }
      }

      Axios.sendVerifyCode({
        target: this.account,
      })
        .then((res) => {
          this.time = 30;
          this.timer = setInterval(() => {
            if (this.time > 0) {
              this.time = this.time - 1;
            } else {
              this.time = 0;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
    getRegType(activeIndex, bFlag) {
      switch (activeIndex) {
        case 0:
          return bFlag ? this.$t("账号") : this.$t("请输入账号");
        case 1:
          return bFlag ? this.$t("邮箱") : this.$t("请输入邮箱");
        case 2:
          return bFlag ? this.$t("手机号") : this.$t("请输入手机号");
      }
    },
    onClose() {
      console.log("onClose");
    },
    onSuccess() {
      console.log("onSuccess");
      this.registerApi();
      this.show = false;
    },
    onFail() {
      this.msg = "";
    },
    onRefresh() {
      this.msg = "";
    },
    onSelectArea() {
      this.openBtn();
    },
    //打开国家列表底部弹窗
    openBtn() {
      this.$refs.controlChild.open();
    },
    //获取到当前选中国家的code值
    getName(params) {
      this.icon = params[1];
      this.dialCode = params[2];
    },
    agreeProt() {
      this.agree = !this.agree;
    },
    register() {
      // if (this.activeIndex == 0){
      //     let match = this.username.search(/@/);
      //     if (this.username == '' || match == -1) {
      //         this.$toast(this.$t('请输入正确的邮箱地址'));
      //         return
      //     }
      // }else{
      //     if (this.username == '' ) {
      //         this.$toast(this.$t('请输入手机号'));
      //         return
      //     }
      // }
      switch (this.activeIndex) {
        case 0: {
          if (this.username == "") {
            this.$toast(this.$t("请输入账号"));
            return;
          }
          if (this.username.length < 6 || this.username.length > 30) {
            this.$toast(this.$t("账号长度必须6-30位"));
            return;
          }
          break;
        }
        case 1: {
          let match = this.username.search(/@/);
          if (this.username == "" || match == -1) {
            this.$toast(this.$t("请输入正确的邮箱地址"));
            return;
          }
          if (this.verifyCode.length < 6) {
            this.$toast(this.$t("请输入6位验证码"));
            return;
          }
          break;
        }
        case 2: {
          if (this.username == "") {
            this.$toast(this.$t("请输入手机号"));
            return;
          }
          if (this.verifyCode.length < 6) {
            this.$toast(this.$t("请输入6位验证码"));
            return;
          }
          break;
        }
      }
      if (this.password == "") {
        this.$toast(this.$t("请输入密码"));
        return;
      }
      if (this.password.length < 6 || this.password.length > 12) {
        this.$toast(this.$t("登录密码必须6-12位"));
        return;
      }
      if (this.repassword !== this.password) {
        this.$toast(this.$t("Login password is inconsistent"));
        return;
      }
      if (this.fundPassword.length < 6 || this.refundPassword.length < 6) {
        this.$toast(this.$t("资金密码(6位数字)"));
        return false;
      }

      if (this.fundPassword !== this.refundPassword) {
        this.$toast(this.$t("Fund password is inconsistent"));
        return false;
      }
      if (!this.agree) {
        this.$toast(this.$t("请同意服务条款"));
        return;
      }
      // this.show = true
      this.registerApi();
    },
    changeIndex(index) {
      this.activeIndex = index;
      this.username = "";
      this.password = "";
      this.repassword = "";
      this.fundPassword = "";
      this.refundPassword = "";
      this.verifyCode = "";
      switch (index) {
        case 0:
        case 1: {
          this.isArea = false;
          break;
        }
        case 2: {
          this.isArea = true;
          break;
        }
      }
    },
    registerApi() {
      let username = "";
      switch (this.activeIndex) {
        case 0: {
          this.type = 3;
          break;
        }
        case 1: {
          this.type = 2;
          username = this.username;
          break;
        }
        case 2: {
          this.type = 1;
          username = `${this.dialCode}${this.username}`;
          break;
        }
      }

      // 邮箱或手机注册
      if (this.activeIndex == 1 || this.activeIndex == 2) {
        Axios.registerEmailPhone({
          username: username,
          password: this.password,
          re_password: this.repassword,
          verifcode: this.verifyCode,
          safeword: this.refundPassword,
          type: this.type,
          usercode: this.invitCode,
        })
          .then((res) => {
            this.GET_USERINFO(res.data);
            this.$router.push("/identity");
          })
          .catch((error) => {
            if (error.code === "ECONNABORTED") {
              this.$toast(this.$t("网络超时！"));
            } else if (error.msg !== undefined) {
              this.$toast(this.$t(error.msg));
            }
          });
      } else {
        // 用户名注册
        this.accountRegister();
      }
    },
    //用户名注册
    accountRegister() {
      if (this.activeIndex == 0) {
        Axios.registerAccount({
          username: this.username,
          password: this.password,
          safeword: this.refundPassword,
          usercode: this.invitCode,
        })
          .then((res) => {
            this.GET_USERINFO(res.data);
            this.$router.push("/identity");
          })
          .catch((error) => {
            if (error.code === "ECONNABORTED") {
              this.$toast(this.$t("网络超时！"));
            } else if (error.msg !== undefined) {
              this.$toast(this.$t(error.msg));
            }
          });
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  deactivated() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  box-sizing: border-box;
  padding: 32px;
  font-size: 26px;
}

.top {
  padding-left: 18px;
  padding-top: 18px;

  img {
    width: 37px;
    height: 37px;
  }
}

.title {
  font-weight: 700;
  font-size: 52px;
  margin-top: 54px;
  margin-bottom: 66px;
}

.re-tab {
  margin-bottom: 44px;

  div {
    padding: 0 36px;
    height: 68px;
    line-height: 68px;
    text-align: center;
    border-radius: 8px;
    margin-right: 20px;
  }

  .active {
    @include themify() {
      background: themed("tab_background");
    }

    @include themify() {
      color: themed("text_color");
    }
  }
}

.forget {
  color: #1d91ff;
  font-size: 24px;
  line-height: 28px;
}

.btn {
  color: #fff;
  height: 88px;
  line-height: 88px;
  text-align: center;
  font-size: 32px;
  margin-top: 40px;
  border-radius: 10px;
  background-color: #000000;
}

.noTips {
  margin-top: 48px;
}

.protocol {
  display: flex;
  align-items: center;
  height: 30px;

  i {
    width: 30px;
    height: 30px;
    margin-right: 18px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.codeWrap {
  padding-bottom: 44px;

  p {
    @include themify() {
      color: themed("text_color");
    }
  }

  .iptbox {
    height: 88px;
    margin-top: 18px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;

    input {
      flex: 1;
      height: 100%;
      border: none;
    }

    span {
      @include themify() {
        color: themed("color_main");
      }
    }
  }
}
</style>
